<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form ref="searchForm" :inline="true" :model="search" size="mini">
      <el-form-item prop="pageKey" label="页面唯一标识">
        <el-input v-model="search.pageKey" placeholder="页面唯一标识" class="search-input"/>
      </el-form-item>
      <el-form-item prop="pageName" label="页面名称">
        <el-input v-model="search.pageName" placeholder="页面名称" class="search-input"/>
      </el-form-item>
      <el-form-item prop="isEnable" label="是否启用">
        <r-select v-model="search.isEnable" type="1004" class="form-input" clearable="true"/>
      </el-form-item>
      <br>
      <div style="text-align:right">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="searchHandle">查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-refresh"
            @click="resetForm('searchForm')">重置
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 用户列表 -->
    <baseTable
      ref="table"
      @chaneg-size="changeSizeHandle"
      @chaneg-page="changePageHandle"
    >
      <el-table-column label="序号" type="index" min-width="50"/>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="PAGE_KEY"
        label="页面唯一标识"
        width="150"/>
      <el-table-column
        prop="PAGE_NAME"
        label="页面名称"
        width="150"
      />
      <el-table-column
        prop="PAGE_DESC"
        label="页面描述"
        width="300"/>
      <el-table-column
        prop="IS_ENABLE"
        label="是否启用"
        min-width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.IS_ENABLE === 10041001 ? 'success' : 'primary'"
          >{{ scope.row.IS_ENABLE | isenbleFilter }}
          </el-tag>
        </template>
      </el-table-column>

    </BaseTable>

    <!-- 弹框 -->
    <BaseDialog
      ref="dialog"
      @confirm-handle="submitForm"
      @cancel-handle="cancel"
    >
      <template slot-scope="scope">
        <el-form
          ref="form"
          :model="form"

          :rules="rules"
          label-position="left"
          label-width="200px"
          class="dialog-form"
        >
          <el-form-item label="页面名称" prop="page_key">
            <el-input v-model="form.page_key" :disabled="true" placeholder="页面唯一标识"/>
          </el-form-item>
          <el-form-item label="页面名称" prop="page_name">
            <el-input v-model="form.page_name" :disabled="true" placeholder="页面名称"/>
            <el-input v-show="false" v-model="form.fieldIds"/>
            <el-input v-show="false" v-model="form.page_id"/>
          </el-form-item>
          <el-form-item label="是否启用" prop="is_enable">
            <!-- <el-radio-group v-model="form.is_enable" @change="change">
                <el-radio :label="10041001">是
                  </el-radio>
                <el-radio :label="10041002">否
                  </el-radio>
              </el-radio-group> -->
            <Radio v-model="form.is_enable" type="1004"/>
          </el-form-item>
          <el-form-item label="必填字段" prop="FIELD_NAME">
            <checkboxs v-model="form.fieldIds" :url="requiredurl" model="DMSCLOUD_BASEDATA" checkid="FIELD_ID" checkname="FIELD_NAME"/>
          </el-form-item>
          <el-form-item label="显示字段(勾选代表页面不显示)" prop="FIELD_NAME">
            <!-- <el-checkbox-group  v-model="checkedList" >
                <el-checkbox v-for="dispaly in dispalyData" :label="dispaly.FIELD_ID" :key="dispaly.FIELD_ID" :value="dispaly.FIELD_ID" >
                {{dispaly.FIELD_NAME}}
                </el-checkbox>
              </el-checkbox-group>  -->
            <checkboxs v-model="form.fieldIds" :url="displayurl" model="DMSCLOUD_BASEDATA" checkid="FIELD_ID" checkname="FIELD_NAME"/>
          </el-form-item>
        </el-form>

      </template>
    </BaseDialog>

  </div>
</template>

<script>

import { getPageInfo, getPageInfoById, savePageFieldPermission } from '@/api/admin/auth/searchPage'
import BaseTable from '@/components/BaseTable'
import BaseDialog from '@/components/BaseDialog'
import rSelect from '@/components/Select/Select'
import Radio from '@/components/Radio/Radio'
import checkboxs from '@/components/Checkbox/checkbox'
import formMixins from '@/mixins/formMixins'
import _ from 'lodash'

export default {
  name: 'EmployeeInfo',
  components: {
    BaseTable,
    BaseDialog,
    rSelect,
    checkboxs,
    Radio
  },
  // 过滤器
  filters: {
    isenbleFilter(val) {
      return val === 10041001 ? '是' : '否'
    }
  },
  mixins: [formMixins],
  data() {
    return {
      displayurl: '',
      requiredurl: '',
      form: {
        fieldIds: ''
      },
      rules: {

      },
      search: {
        limit: 10,
        pageNum: 1,
        pageKey: '',
        pageName: '',
        isEnable: ''
      },
      requiredData: [],
      dispalyData: []
    }
  },
  computed: {

  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      table.wait()
      getPageInfo(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    // 打开编辑框
    edit(data) {
      this.$refs['dialog'].open('EDIT', this.form)
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = {}
      })
      const id = data.PAGE_ID
      this.requiredurl = '/basedata/page/' + id + '/pageFiled/required'
      this.displayurl = '/basedata/page/' + id + '/pageFiled/display'

      // 根据id查询
      getPageInfoById(id)
        .then(res => {
          this.form = _.cloneDeep(res)
          this.form.fieldIds = res.fieldIds.split(',').map(Number)
        })
        .catch(err => {
          // table.complete()
        })
    },

    // 弹框确认按钮
    submitForm(dialog) {
      dialog.wait()
      const params = {
        pageId: this.form.page_id,
        isEnable: this.form.is_enable,
        pageFieldList: this.form.fieldIds
      }
      savePageFieldPermission(params).then(() => {
        dialog.complete().close()
        this.$message({
          type: 'success',
          message: '页面权限保存成功!'
        })
        this.searchHandle()
      }).catch(err => {
        this.$message({
          type: 'info',
          message: '页面权限保存失败!'
        })
        dialog.complete()
      })
    }

  }

}
</script>

<style scoped>
</style>
